<template>
    <div class="newsListContainer">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media"
                v-for="item in newsList" :key="item.id"
            >
                <router-link :to="`newsInfo/${ item.id }`">
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h3>{{ item.title }}</h3>
                        <p class='mui-ellipsis'>
                            <span>发表时间：{{ item.add_time | timeFormat('YYYY-MM-DD:hh:mm:ss') }}</span>
                            <span>点击：{{ item.click }}次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //新闻资讯 列表
                newsList: []
            }
        },
        created() {
            // 发送请求 新闻资讯 列表叔叔
            this.getNewsList()
        },
        methods: {
            // 获取 新闻列表
            getNewsList() {
                this.$http.get('api/getnewslist')
                    .then(function (data) {
                        // 判断是否 获取成功 获取失败 提示 退出
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        // success
                        this.newsList = data.message
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error 500', pos: 'middle' })
                    })
            }
        }
    }
</script>

<style scoped lang="less">
    .newsListContainer {
        .mui-media-body {
            h3 {
                font-size: 14px;
            }
            .mui-ellipsis {
                display: flex;
                justify-content: space-between;
                color: #226aff;
                font-size: 12px;
            }
        }
    }
</style>